<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/bootstrap-3.4.1-dist/css/bootstrap.css">
    <script>
        window.onload=function(){
            var box=document.getElementById("all1");
            var ol=box.children[1];
            var ul=box.children[0].children[0];
            var lis=ol.children;
            var leader=0;
            var target=0;
            for(var i=0;i<lis.length;i++){
                lis[i].index=i;
                lis[i].onmouseover=function(){
                    for(var j=0;j<lis.length;j++){
                        lis[j].className="";
                    }
                    this.className="curre";
                    target=-1440*this.index;
                }
            }
            setInterval(ps,30);
                function ps(){
                   leader=leader+(target-leader)/10;
                   ul.style.left=leader+"px";
                    }
}
    </script>
</head>
<body>
    <header>
        <div class="top">
            <div class="tou">
                <div class="logo  animate__animated animate__shakeY">
                    <img data-lazy-src="./img/logo.png" alt="">
                </div>
                     <input type="checkbox" id="mobi" hidden/>
                <label for="mobi" class="mobi">
                    <span></span>
                    <span></span>
                    <span></span>
                </label>
                <div class="navigation animate__animated animate__swing" id="nav">
                    <ul>
                        <li> <a href="./index.html" id="aaaa">首页</a></li>
                        <li> <a href="./family.html" id="aaaa">Laya家族</a> </li>
                        <li><a href="./game.html" id="aaaa">游戏</a></li>
                        <li> <a href="./news.html" id="aaaa">新闻动态</a></li>
                        <li>开发者中心</li>
                        <li>开发者社区</li>
                        <li> 开放平台</li>
                        <li> <a href="./about.html" id="aaaa">关于我们</a> </li>
                    </ul>
                    <div class="text" id="text">
                        <select>
                            <option vaul="">Language </option>
                            <option vaul="">简体中文</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="bul" id="bul">
        <div id="all1" class="wow bounceInDown">
            <div id="box1">
                <ul >
                    <li><img data-lazy-src="./img/rockets.png" alt="" id="kk" class="wow bounceInDown"></li>
                    <li><img data-lazy-src="./img/rockets.png" alt="" id="kk" class="wow bounceInDown"></li>
                    <li><img data-lazy-src="./img/rockets.png" alt="" id="kk" class="wow bounceInDown"></li>
                </ul>
            </div>
            <ol>
                <li class="curre"> </li>
                <li> </li>
                <li> </li>
            </ol>
        </div>
    </div>
    <main>
        <div class="all">
            <div class="container">
                <div class="row">
                    <div class="col-md-8" id="col">
                        <div class="text ">
                            <h2 class="animate__animated animate__backInLeft animate__delay-1s">LayaFlash 引擎</h2>
                            <h5 class="animate__animated animate__backInLeft animate__delay-1s">让Flash技术变成开发HTML5产品的利器</h5>
                            <div class="row">
                                <div class="col-md-6 col-sm-6">
                                    <div class="item">
                                        <div class="icon animate__animated animate__fadeInDown animate__delay-1s">
                                            <img data-lazy-src="./img/icon1.png" alt="">
                                        </div>
                                        <div class="context animate__animated  animate__fadeInTopRight animate__delay-1s">
                                            <p>快速Flash产品转换</p>
                                            <span>Flash页游\手游仅需1个人7天即可
                                                转换为HTML5和APP游戏</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div class="item">
                                        <div class="icon animate__animated  animate__fadeInTopRight animate__delay-1s">
                                            <img data-lazy-src="./img/icon2.png" alt="">
                                        </div>
                                        <div class="context animate__animated  animate__fadeInTopRight animate__delay-1s">
                                            <p>快速Flash产品转换</p>
                                            <span>Flash页游\手游仅需1个人7天即可
                                                转换为HTML5和APP游戏</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div class="item ">
                                        <div class="icon animate__animated  animate__fadeInTopRight animate__delay-1s">
                                            <img data-lazy-src="./img/icon3.png" alt="">
                                        </div>
                                        <div class="context animate__animated  animate__fadeInTopRight animate__delay-1s">
                                            <p>快速Flash产品转换</p>
                                            <span>Flash页游\手游仅需1个人7天即可
                                                转换为HTML5和APP游戏</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6">
                                    <div class="item">
                                        <div class="icon animate__animated  animate__fadeInTopRight animate__delay-1s">
                                            <img data-lazy-src="./img/icon4.png" alt="">
                                        </div>
                                        <div class="context animate__animated  animate__fadeInTopRight animate__delay-1s">
                                            <p>快速Flash产品转换</p>
                                            <span>Flash页游\手游仅需1个人7天即可
                                                转换为HTML5和APP游戏</span>
                                        </div>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4    animate__animated animate__wobble animate__delay-1s">
                    <div class="tu  animate__animated animate__wobble">
                        <img data-lazy-src="./img/phone.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="advantage">
        <div class="container" id="tu">
            <div class="row">
                <div class="col-md-6 shang">
                    <div class="tu animate__animated animate__lightSpeedInLeft animate__delay-1.5s"> <img data-lazy-src="./img/01.jpg.png" alt=""></div>
                </div>
                <div class="col-md-6 xai animate__animated animate__lightSpeedInRight animate__delay-1.5s">
                    <div class="zhi">
                        <h2>Layabox 优势</h2>
                        <div class="row">
                            <div class="col-md-12 col-sm-12">
                                <div class="icon"><img data-lazy-src="./img/icon5.png" alt=""></div>
                                <div class="text">
                                <p>快速上手，Flash程序员3小时掌握HTML5开发</p>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 col-sm-12">
                                <div class="icon"><img data-lazy-src="./img/icon6.png" alt=""></div>
                                <div class="text">
                                <p>4年优化打磨，LayaPlayer运行器性能媲美APP</p>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 col-sm-12">
                                <div class="icon"><img data-lazy-src="./img/icon7.png" alt=""></div>
                                <div class="text">
                                <p>超5亿的LayaPlayer移动设备安装量帮助CP发行</p>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 col-sm-12">
                                <div class="icon"><img data-lazy-src="./img/icon8.png" alt=""></div>
                                <div class="text">
                                <p>使用LayaFlash开发大型HTML5游戏的企业超100家</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="family">
        <div class="container">
            <div class="row to" id="to">
                <div class="col-md-12 zi animate__animated animate__backInLeft animate__delay-1.5s">
                    <h2>Layabox产品家族</h2>
                </div>
            </div>
            <div class="row qw">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="row df"  id="df">
                                <div class="col-md-4  col-sm-4">
                                    <div class="icon"><img data-lazy-src="./img/icon9.png" alt=""></div>
                                </div>
                                <div class="col-md-8 col-sm-8" id="ry">
                                    <div class="text1"  id="text2">
                                        <p>LayaAir</p>
                                        <p>核心库仅100K左右的新一代HTML5引擎，支
                                            持AS3\TS\JS语言开发，支持2D\3D，非运行
                                            器模式下性能媲美APP。</p>
                                    </div>
                                </div>
                            </div>
                           </div>
                           <div class="col-md-6 col-sm-6">
                            <div class="row df"  id="df">
                                <div class="col-md-4 col-sm-4 ">
                                    <div class="icon"><img data-lazy-src="./img/icon10.png" alt=""></div>
                                </div>
                                <div class="col-md-8 col-sm-8" id="ry">
                                    <div class="text1"  id="text2">
                                        <p>LayaPublish</p>
                                        <p>Layabox发行业务，通过在H5产业链中的技术
                                            桥梁优势，帮助CP获得流量支持。</p>
                                    </div>
                                </div>
                            </div>
                           </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6 col-sm-8">
                            <div class="row df"  id="df">
                                <div class="col-md-4 col-sm-4">
                                    <div class="icon"><img data-lazy-src="./img/icon11.png" alt=""></div>
                                </div>
                                <div class="col-md-8 col-sm-8" id="ry">
                                    <div class="text1"  id="text2">
                                        <p>LayaFlash</p>
                                        <p>使用Flash AS3语言开发H5的引擎框架，可直
                                            接在FB或FD中开发、调试、编译H5，也可快
                                            速将Flash页游\手游转换成H5游戏。</p>
                                    </div>
                                </div>
                            </div>
                           </div>
                           <div class="col-md-6 col-sm-6">
                            <div class="row df"  id="df">
                                <div class="col-md-4 col-sm-4">
                                    <div class="icon"><img data-lazy-src="./img/icon12.png" alt=""></div>
                                </div>
                                <div class="col-md-8 col-sm-8" id="ry">
                                    <div class="text1"  id="text2">
                                        <p>LayaStore</p>
                                        <p>嵌入式HTML5商城，APP只需嵌入20K的SDK
                                            即可以获得托管式HTML5商店服务，进入流量
                                            获利新时代。</p>
                                    </div>
                                </div>
                            </div>
                           </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="row df" id="df">
                                <div class="col-md-4 col-sm-4">
                                    <div class="icon"><img data-lazy-src="./img/icon13.png" alt=""></div>
                                </div>
                                <div class="col-md-8 col-sm-8" id="ry">
                                    <div class="text1"  id="text2">
                                        <p>LayaPlayer</p>
                                        <p>HTML5高速运行器，性能卓越、支持大型
                                            HTML5游戏流畅运行，目前已植入QQ、百度
                                            等20多家主流平台，安装量超5亿。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                           <div class="col-md-6 col-sm-6">
                            <div class="row df"  id="df">
                                <div class="col-md-4 col-sm-4">
                                    <div class="icon"><img data-lazy-src="./img/icon14.png" alt=""></div>
                                </div>
                                <div class="col-md-8 col-sm-8" id="ry">
                                    <div class="text1" id="text2">
                                        <p>LayaOpen</p>
                                        <p>核心库仅100K左右的新一代HTML5引擎，支
                                            持AS3\TS\JS语言开发，支持2D\3D，非运行
                                            器模式下性能媲美APP。</p>
                                    </div>
                                </div>
                            </div>
                           </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="game">
       <div class="container">
             <div class="row">
                <div class="col-md-6" id="pi">
                    采用Layabox引擎的精彩游戏
                </div>
                <div class="col-md-6" id="iu">
                    <p>更多</p>
                </div>
            </div>
            <div class="row" id="fv">
                <div class="col-md-4" id="bg">
                    <div class="img">
                        <img data-lazy-src="./img/game.png" alt="">
                    </div>
                </div>
                <div class="col-md-8 col-sm-8" id="pb">
                        <div class="row">
                            <div class="col-md-3 col-sm-3" id="ml">
                                <img data-lazy-src="./img/game1.png" alt="">
                                <p>猎刃2</p>
                            </div>
                            <div class="col-md-3  col-sm-3"  id="ml">
                                <img data-lazy-src="./img/game1.png" alt="">
                                <p>猎刃2</p>
                            </div>
                            <div class="col-md-3 col-sm-3"  id="ml">
                                <img data-lazy-src="./img/game1.png" alt="">
                                <p>猎刃2</p>
                            </div>
                            <div class="col-md-3  col-sm-3"  id="ml">
                                <img data-lazy-src="./img/game1.png" alt="">
                                <p>猎刃2</p>
                            </div>
                            <div class="col-md-3  col-sm-3"  id="ml">
                                <img data-lazy-src="./img/game1.png" alt="">
                                <p>猎刃2</p>
                            </div>
                            <div class="col-md-3  col-sm-3"  id="ml">
                                <img data-lazy-src="./img/game1.png" alt="">
                                <p>猎刃2</p>
                            </div>
                        </div>
                        <div class="row xia" id="mb">
                            <div class="col-md-3 col-sm-3"  id="ml">
                                <img data-lazy-src="./img/game1.png" alt="">
                                <p>猎刃2</p>
                            </div>
                            <div class="col-md-3  col-sm-3"  id="ml">
                                <img data-lazy-src="./img/game1.png" alt="">
                                <p>猎刃2</p>
                            </div>
                            <div class="col-md-3  col-sm-3"  id="ml">
                                <img data-lazy-src="./img/game1.png" alt="">
                                <p>猎刃2</p>
                            </div>
                            <div class="col-md-3  col-sm-3"  id="ml">
                                <img data-lazy-src="./img/game1.png" alt="">
                                <p>猎刃2</p>
                            </div>
                            <div class="col-md-3  col-sm-3"  id="ml">
                                <img data-lazy-src="./img/game1.png" alt="">
                                <p>猎刃2</p>
                            </div>
                            <div class="col-md-3  col-sm-3" id="ml">
                                <img data-lazy-src="./img/game1.png" alt="">
                                <p>猎刃2</p>
                            </div>
                        </div>
                </div>
            </div>
        </div>
        </div>
    <div class="cooperation">
        <div class="container">
            <div class="row" id="et">
                <div class="col-md-12" id="md">
                    <h2 id="tr">合作伙伴</h2>
                    <p id="hb">(排序不分先后)</p>
                </div>
            </div>
            <div class="biao">
            <div class="row lie">
                <div class="col-md-2"> 
                    <img data-lazy-src="./img/2.jpg.png" alt="">
                </div>
                <div class="col-md-2">
                    <img data-lazy-src="./img/2.jpg.png" alt="">
                </div>
                <div class="col-md-2">
                    <img data-lazy-src="./img/2.jpg.png" alt="">
                </div>
                <div class="col-md-2">
                    <img data-lazy-src="./img/2.jpg.png" alt="">
                </div>
                <div class="col-md-2">
                    <img data-lazy-src="./img/2.jpg.png" alt="">
                </div>
                <div class="col-md-2">
                    <img data-lazy-src="./img/2.jpg.png" alt="">
                </div>
            </div>
            <div class="row lie">
                <div class="col-md-2"> 
                    <img data-lazy-src="./img/2.jpg.png" alt="">
                </div>
                <div class="col-md-2">
                    <img data-lazy-src="./img/2.jpg.png" alt="">
                </div>
                <div class="col-md-2">
                    <img data-lazy-src="./img/2.jpg.png" alt="">
                </div>
                <div class="col-md-2">
                    <img data-lazy-src="./img/2.jpg.png" alt="">
                </div>
                <div class="col-md-2">
                    <img data-lazy-src="./img/2.jpg.png" alt="">
                </div>
                <div class="col-md-2">
                    <img data-lazy-src="./img/2.jpg.png" alt="">
                </div>
            </div>
        </div>
        </div>
    </div>
    </main>
    <footer>
        <div class="text" id="text5">
            <div class="left">
                <span>公司简介</span>
                <span>联系方式</span>
                <span>人才招聘</span>
                <p>All Copyright Reserved by Layabox Inc. 京ICP备15008163号-1 </p>
            </div>
            <div class="right">
                <div class="dd">
                    <img data-lazy-src="./img/icon15.png" alt="">
                </div>
                <div class="dd" id="uy">
                    <img data-lazy-src="./img/icon16.png" alt="">
                    <div class="ma">
                        <img data-lazy-src="./img/ma.png" alt="">
                    </div>
                </div>
                <div class="dd">
                    <img data-lazy-src="./img/icon17.png" alt="">
                </div>
            </div>
        </div>
    </footer>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="./131/js/wow.min.js"></script>
    <script src="./EasyLazyload/dist/EasyLazyload.min.js"></script>
    <script>
        lazyLoadInit({
            showTime:1100,
            onLoadBackEnd:function(i,e){
                console.log("onLoadBackEnd:"+i);
            }
            ,onLoadBackStart:function(i,e){
                console.log("onLoadBackStart:"+i);
            }
        });
        //懒加载动画效果
	    new WOW().init();
    </script>
</body>
</html> 